<template>
  <div class="product">
    <div class="search-filter">
      <search
        class="search-block"
        placeholder="输入套餐名称搜索"
        @on-result-click="handleClickResult"
        @on-change="handleChangeSearch"
        v-model="searchValue"
        @on-cancel="handleCancelSearch"
        @on-submit="handleSubmitSearch"
        @on-clear="handleClearSearch"
        ref="search"
      ></search>
      <div class="filter-block">
          <div style="width: 18%; float: left" @click="handleSort(1)">
            <span class="filter-span">销量<i :class="handleSalesSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(2)">
            <span class="filter-span">人气<i :class="handlePopuSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(3)">
            <span class="filter-span">档次<i :class="handleLevelSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 18%; float: left" @click="handleSort(4)">
            <span class="filter-span">价格<i :class="handlePriceSort ? 'tri-up-icon' : 'tri-down-icon'"></i></span>
          </div>
          <div style="width: 26%; float: left">
            <x-input
              type="number"
              placeholder="该价格以下"
              class="filter-input"
              @on-focus="handlePriceFilter = true"
              @on-blur="handlePriceFilter = false"
              :style="handlePriceFilter ? {width: '60%', border: '2px solid #f9c270'} : ''"
            ></x-input>
            <icon v-if="handlePriceFilter" type="search" class="search-btn"></icon>
          </div>
      </div>
    </div>
    <div class="product-list" ref="productWrapper">
      <div>
        <div class="top-tip">
          <span class="refresh-hook">{{ product.topTip }}</span>
        </div>
        <div class="show-block" style="margin-top: 10px">
          <flexbox v-for="(productList, index) of productFmt" :key="index">
            <flexbox-item v-for="product of productList" :key="product.id">
              <ProductCp :product="product" :class="product.id % 2 !== 0 ? 'left' : 'right'"></ProductCp>
            </flexbox-item>
          </flexbox>
        </div>
        <div class="bottom-tip">
          <span class="loading-hook">{{ product.bottomTip }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Group, Search, XInput, Icon, Flexbox, FlexboxItem } from 'vux'
import ProductCp from './public/productCp'

export default {
  components: {
    Group,
    Search,
    Icon,
    XInput,
    Flexbox,
    FlexboxItem,
    ProductCp
  },
  data () {
    return {
      searchValue: '',
      handleSalesSort: false,
      handlePopuSort: false,
      handleLevelSort: false,
      handlePriceSort: false,
      handlePriceFilter: false,
      productFmt: [],
      productList: [],
      totalProductSize: 0,
      productPage: 0,
      product: {
        topTip: '下拉刷新',
        bottomTip: '加载更多',
        isLoading: false,
        refreshSuccess: false
      }
    }
  },
  created () {
    this.getProduct(true)
  },
  methods: {
    getProduct (isRefresh) {
      this.product.isLoading = true
      if (isRefresh) {
        this.productPage = 1
        this.productList = []
        this.productFmt = []
      }
      let params = {
        pageNum: this.productPage,
        pageSize: 8
      }
      this.$http.post('/product/list', params).then(res => {
        if (res.body.response) {
          this.productPage++
          this.productList = this.productList.concat(res.body.response.list)
          for (let i = 0; i < res.body.response.list.length; i += 2) {
            this.productFmt.push(res.body.response.list.slice(i, i + 2))
          }
          this.totalProductSize = res.body.response.total
          this.$nextTick(() => {
            if (isRefresh) {
              this._initProductScroll()
            } else {
              this.productScroll.refresh()
            }
            if (this.productList.length === this.totalProductSize) {
              this.product.bottomTip = '没有更多啦'
            }
          })
        }
      })
    },
    handleClearSearch () {

    },
    handleCancelSearch () {

    },
    handleChangeSearch () {

    },
    handleSubmitSearch () {

    },
    handleClickResult () {

    },
    handleSort (type) {
      switch (type) {
        case 1:
          this.handleSalesSort = !this.handleSalesSort
          if (this.handleSalesSort) {

          } else {

          }
          break
        case 2:
          this.handlePopuSort = !this.handlePopuSort
          if (this.handlePopuSort) {

          } else {

          }
          break
        case 3:
          this.handleLevelSort = !this.handleLevelSort
          if (this.handleLevelSort) {

          } else {

          }
          break
        case 4:
          this.handlePriceSort = !this.handlePriceSort
          if (this.handlePriceSort) {

          } else {

          }
          break
      }
    },
    _initProductScroll () {
      this.product = {
        topTip: '下拉刷新',
        bottomTip: '加载更多',
        isLoading: false,
        refreshSuccess: false
      }
      if (this.productScroll) {
        return
      }
      var productScroll = new BScroll(this.$refs.productWrapper, {
        click: true,
        probeType: 1
      })
      this.productScroll = productScroll
      var _this = this
      productScroll.on('scroll', function (position) {
        _this.product.isLoading = false
        if (position.y > 50) {
          _this.product.topTip = '释放立即刷新'
        }
        if (_this.productList.length < _this.totalProductSize) {
          if (position.y < (this.maxScrollY - 60)) {
            _this.product.bottomTip = '释放加载更多'
          }
        }
      })
      productScroll.on('touchEnd', function (position) {
        if (position.y > 50) {
          setTimeout(function () {
            if (!_this.product.isLoading) {
              _this.getProduct(true)
            }
            _this.product.topTip = '下拉刷新'
            _this.product.refreshSuccess = true
            setTimeout(() => {
              _this.product.refreshSuccess = false
            }, 1000)
          }, 1000)
        } else if (position.y < (this.maxScrollY - 60)) {
          if (_this.productList.length < _this.totalProductSize) {
            _this.product.bottomTip = '加载中...'
            setTimeout(function () {
              _this.product.bottomTip = '查看更多'
              if (!_this.product.isLoading) {
                _this.getProduct()
              }
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
.product {
  padding-bottom: 60px;
  .search-filter {
    position: relative;
    z-index: 2;
    background: #f8f8fa;
    height: 100px;
    top: -10px;
    .weui-search-bar:after {
      width: 0;
    }
    .weui-search-bar:before {
      width: 0;
    }
    .search-block {
      z-index: 2;
      margin: 10px auto 0 auto;
    }
    .weui-cell {
      padding: 2px 2px;
    }
    .filter-block {
      z-index: 2;
      width: 94%;
      margin: 15px auto 10px auto;
      height: 30px;
      color: @bg-font-color;
      font-size: 13px;
      .filter-span {
        display: inline-block;
      }
      .filter-input {
        display: inline-block;
        width: 100%;
        border: 2px solid #fff;
        margin-top: -4px;
        border-radius: 5px;
        background: #fff;
      }
      .search-btn {
        display: inline-block;
        float: right;
        height: 20px;
        width: 22px;
        border-radius: 5px;
        padding-top: 5px;
        padding-left: 3px;
        margin-top: -3px;
        color: #fff;
        background: @theme-color;
        box-shadow: 0 2px 15px @theme-shadow-color;
      }
    }
    .tri-up-icon {
      float: right;
      background: url('../assets/tri-up.png') no-repeat;
      background-size: 20px;
      width: 20px;
      height: 20px;
      margin-top: -2px;
    }
    .tri-down-icon {
      float: right;
      margin: 2px 7px 0 0;
      background: url('../assets/tri-down.png') no-repeat;
      background-size: 22px;
      width: 22px;
      height: 22px;
      margin-top: 0px;
    }
  }
  .product-list {
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    width: 100%;
    .show-block {
      position: relative;
    }
    .left {
      margin-left: 4vw;
    }
    .right {
      margin-right: 4vw;
    }
    .top-tip {
      font-size: 13px;
      position: absolute;
      top: -30px;
      z-index: 1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #555;
    }
    .bottom-tip {
      font-size: 13px;
      margin-top: 20px;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #777;
      background: #f2f2f2;
    }
  }
}
</style>
